<%--
  Created by IntelliJ IDEA.
  User: WangXin
  Date: 2020/2/24
  Time: 13:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>图片裁剪</title>
    <link rel="stylesheet" href="<%=basePath %>leyuiyc/css/font.css">
    <link rel="stylesheet" href="<%=basePath %>leyuiyc/css/xadmin.css">
    <script type="text/javascript" src="<%=basePath %>leyuiyc/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath %>leyuiyc/js/xadmin.js"></script>
</head>
<body>
<div align="center">

    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        <div id="uploadQRcode" class="layui-upload">

            <div style="color: #c2c2c2;margin:10px 0;">
                温馨提示 ：
                轮播图（宽：500px，高：530px）
            </div>
            <div class="layui-upload-list">
                <img id="pic" src="" alt="" class="layui-upload-img"
                     style="display:none;border:1px solid black;">
            </div>
            <div id="startDiv">

                <button class="layui-btn  layui-btn-radius layui-btn-normal"
                        id="editimg3">裁剪轮播图
                </button>
                &emsp;&emsp;&emsp;&emsp;
                <button class="layui-btn  layui-btn-radius" style="display: none"
                        id="reSet">重&emsp;&emsp;&emsp;置
                </button>
            </div>
            <br>

            <div style="display: none" id="picPathDiv">

                图片本地路径：<input type="text" id="picPath" class="layui-input" readonly="true" style="width: 285px">
            </div>

        </div>
    </blockquote>
</div>


<script type="text/javascript">
    layui.config({
        base: '<%=basePath%>/layui/lay/mymodules/'
    }).use(["element", "layer", 'croppers', "form", "table", "jquery"], function () {
        var layer = layui.layer;
        var form = layui.form;
        var croppers = layui.croppers;
        var $ = layui.jquery;


        $("#reSet").bind('click', function () {
            window.location.reload()
        })


        croppers.render({
            elem: '#editimg3'
            , saveW: 500     //保存宽度
            , saveH: 530
            , mark: 500 / 530    //选取比例
            , area: '900px'  //弹窗宽度
            , url: "tools/editPic.do"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (data) { //上传完毕回调
                $("#picPath").attr('value', data);
                $("#pic").attr('src', "view/viewPic.do?path=" + data);
                $("#picPathDiv").css("display", "block");
                $("#pic").css("display", "block");
                $("#reSet").css("display", "inline");
                $("#pic").css("width", "500px");
                $("#pic").css("height", "530px");
            }
        });
    });


</script>


</body>
</html>
